<!DOCTYPE html>
<html>
<head>
	<title>html5 localstorage小应用</title>
	<meta charset="utf-8">
	<style type="text/css">
	body{ background: #F0F8FF; }
	h1{ color:#333;margin-top: 20px; }
	*{ margin:0px;padding:0px;font-family: consolas,'微软雅黑',sans-serif;  }
	.box{ width:900px;height:580px;margin: 30px auto;border:1px #ddd solid;position: relative;background: url(logo.png) top center repeat-x; }
	.box *{ margin-left: 20px;margin-right: 20px; }
	p{ color:#666; }
	input[type=date]{ width:150px;height:30px;margin-top: 20px;border:1px #aaa solid;font-size: 16px; }
	input[type=button]{ width:80px;height:30px;margin-top: 20px;border:1px #aaa solid;color:#666;background:transparent; }
	input:hover{ border-color:#333; }
	ul{ list-style-type: square;border:1px transparent solid;margin-top: 20px; }
	ul:focus{ border:1px #333 solid; }
	li{ margin-left: 40px;height:30px;color:#333;border-bottom: 1px #aaa dashed;margin-top: 20px; }
	.today{ margin-top: 50px; }
	.list_title{ margin-top: 20px; }
	.footer{ margin-top: 50px;text-align: right; }
	a{ text-decoration: none;color:#22a7f0; }
	.tips{ position: absolute;width:182px;height:165px;right:50px;top:50px;background:url(tips.png) top center; }
	.tips p{ width:160px;margin:70px auto; }
	</style>
</head>
<script type="text/javascript">
	var dateElement = null,today = null;
	function window_onload(){
		dateElement = document.getElementById('date1');
		today = document.getElementById('today');
		setToday();
	}
	function setToday(){
		var date = new Date();
		var yearStr = String(date.getFullYear());
		var monStr = String(date.getMonth()+1);
		var dateStr = String(date.getDate());

		if( monStr.length == 1 )	monStr = '0' + monStr;
		if( dateStr.length == 1 )	dateStr = '0' + dateStr;
		var str = yearStr + '-' + monStr + '-' + dateStr;
		dateElement.value = str;
		today.innerHTML = str;

		var obj = JSON.parse( localStorage.getItem(dateElement.value) );
		setInnerHTML(obj);
		// alert(obj.record);
	}
	function setInnerHTML(obj){
		if(obj==null || obj.record == null){
			document.getElementById('li1').innerHTML = "（暂无记录）";
			document.getElementById('li2').innerHTML = "（暂无记录）";
			document.getElementById('li3').innerHTML = "（暂无记录）";
			document.getElementById('li4').innerHTML = "（暂无记录）";
			document.getElementById('li5').innerHTML = "（暂无记录）";
		}
		else{
			if(obj.record[0] != null)
				document.getElementById('li1').innerHTML = obj.record[0];
			else
				document.getElementById('li1').innerHTML = "（暂无记录）";
			if(obj.record[1] != null)
				document.getElementById('li2').innerHTML = obj.record[1];
			else
				document.getElementById('li2').innerHTML = "（暂无记录）";
			if(obj.record[2] != null)
				document.getElementById('li3').innerHTML = obj.record[2];
			else
				document.getElementById('li3').innerHTML = "（暂无记录）";
			if(obj.record[3] != null)
				document.getElementById('li4').innerHTML = obj.record[3];
			else
				document.getElementById('li4').innerHTML = "（暂无记录）";
			if(obj.record[4] != null)
				document.getElementById('li5').innerHTML = obj.record[4];
			else
				document.getElementById('li5').innerHTML = "（暂无记录）";
		}
	}

	function save(){
		var obj = new Object();
		obj.record = new Array();

		if( document.getElementById('li1').innerHTML != "（暂无记录）" )
			obj.record.push(document.getElementById('li1').innerHTML);
		if( document.getElementById('li2').innerHTML != "（暂无记录）" )
			obj.record.push(document.getElementById('li2').innerHTML);
		if( document.getElementById('li3').innerHTML != "（暂无记录）" )
			obj.record.push(document.getElementById('li3').innerHTML);
		if( document.getElementById('li4').innerHTML != "（暂无记录）" )
			obj.record.push(document.getElementById('li4').innerHTML);
		if( document.getElementById('li5').innerHTML != "（暂无记录）" )
			obj.record.push(document.getElementById('li5').innerHTML);

		localStorage.setItem(dateElement.value, JSON.stringify(obj));
		alert("保存成功！");
	}

	function date_onchange(){
		var obj = null;
		if( isNaN(Date.parse(dateElement.value)) ){
			setToday();
			return;
		}
		today.innerHTML = dateElement.value;
		obj = JSON.parse(localStorage.getItem(dateElement.value));
		setInnerHTML(obj);
	}

</script>
<body onload="window_onload()">
	<div class="box">
		<h1>HTML5 备忘录</h1>
		<p>选择日期：<input type="date" id="date1" onchange="date_onchange()" />
		<input type="button" value="保存" onclick="save()" /></p>
		<p class="today">您选择查看的日期：<span id="today"></span></p>
		<p class="list_title">待办事项：</p>
		<ul contentEditable="true">
			<li id="li1">（暂无记录）</li>
			<li id="li2">（暂无记录）</li>
			<li id="li3">（暂无记录）</li>
			<li id="li4">（暂无记录）</li>
			<li id="li5">（暂无记录）</li>
		</ul>
	<p class="footer">&copy; 2015 Powered by <a href="http://dn-mingzi.qbox.me">MingZI</a></p>
	<div class="tips">
		<p>欢迎使用html5 备忘录，简单易用！</p>
	</div>
	</div>
</body>

</html>